<template>
  <div class="departments-container">
    <!-- 卡片 -->
    <el-card>
      <!-- tabs -->
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构" name="first">
          <!-- layout -->
          <el-row type="flex" justify="space-between">
            <el-col :span="6">
              <div>深圳市凌凌漆科技股份有限公司</div>
            </el-col>
            <el-col :span="4">
              <span class="leader">负责人:</span>
              <!-- 为啥使用div后 负责人这几个字会在下拉菜单的头上? -->
              <!-- <div class="leader">负责人</div> -->
              <!-- Dropdown 下拉菜单 -->
              <el-dropdown>
                <span class="el-dropdown-link">
                  下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <!-- 点击后展开的部分 -->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <el-button type="text">添加子部门</el-button>
                  </el-dropdown-item>
                  <el-dropdown-item>
                    <el-button type="text">凌凌漆</el-button>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
          <!-- 分割线 -->
          <el-divider />
          <!-- 底部 -->
          <el-tree
            :data="data"
            show-checkbox
            node-key="id"
            :default-expanded-keys="[2, 3]"
            :default-checked-keys="[5]"
            :props="defaultProps"
          >
          </el-tree>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'Departments',
  data () {
    return {
      activeName: 'first',
      departs: [
        {
          name: '总裁办',
          manager: '曹操',
          children: [{ name: '董事会', manager: '曹丕' }]
        },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }
      ]
    }
  }
}
</script>

<style lang="scss">
.departments-container {
  padding: 20px;
  // background-color: #fff;
  font-size: 18px;
  color: #069ef7;
  .leader {
    margin-right: 8px;
    color: #fa5203;
  }
  .el-tabs__content {
    padding: 20px 66px;
  }
  .el-divider {
    margin-top: 10px;
  }
}
</style>
